<script setup lang="ts">
import type { TouchCanvasEvent } from '@uni-helper/uni-app-types/index'
import { onReady } from '@dcloudio/uni-app'
import { Leafer, Rect, useCanvas } from '@leafer-ui/miniapp'

useCanvas('canvas', uni) // 绑定平台全局变量

let leafer: Leafer

onReady(() => {
  leafer = new Leafer({ view: 'leafer' })

  const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: '#32cd79',
    draggable: true,
  })

  leafer.add(rect)
})

function receiveEvent(event: TouchCanvasEvent) {
  leafer.receiveEvent(event) // 需手动接收、传递画布交互事件给leafer
}
</script>

<template>
  <canvas
    id="leafer"
    class="leafer-canvas"
    type="2d"
    @touchstart="receiveEvent"
    @touchmove="receiveEvent"
    @touchend="receiveEvent"
    @touchcancel="receiveEvent"
  />
</template>

<style>
page {
  height: 100vh;
  background-color: #000;
}

.leafer-canvas {
  width: 100vw;
  height: 100vh;
}
</style>

<route lang="yaml">
  layout: 'none'
</route>
